<template>
  <el-header class="navbar">
    <div class="left-navbar">
      <div style="margin-right: 20px">
        <el-image class="logo" :src="logoSrc" />
      </div>
      <el-menu
        :default-active="$route.path ? $route.path : '/tasks'"
        :router="true"
        mode="horizontal"
        :ellipsis="false"
        background-color="#2c3e50"
        text-color="#0fb2ef"
        active-text-color="#f59121"
      >
        <el-menu-item index="/tasks" :route="{ name: 'tasks' }">
          <span slot="title"><b>Timed Task</b></span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right-navbar">
      <div class="icon-github" @click="goToGitHub">
        <svg
          t="1688223212444"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2265"
          width="20"
          height="20"
        >
          <path
            d="M855.557 216.855c35.621-66.153-5.089-152.661-5.089-152.661-91.597 0-157.75 61.064-157.75 61.064-35.621-20.355-152.661-20.355-152.661-20.355s-117.04 0-152.661 20.355c0 0-66.153-61.064-157.75-61.064 0 0-40.71 86.508-5.089 152.661 0 0-81.419 76.331-50.887 239.169 28.691 153.018 162.838 193.371 249.346 193.371 0 0-35.621 30.532-30.532 81.419 0 0-50.887 30.532-101.774 10.177s-76.331-71.242-76.331-71.242-50.887-66.153-101.774-40.71c0 0-15.266 15.266 40.71 40.71 0 0 40.71 61.064 55.976 96.685 15.266 35.621 96.685 66.153 178.105 45.798v117.04s0 10.177-20.355 15.266-20.355 15.266-10.177 15.266H723.25c10.177 0 10.177-10.177-10.177-15.266-20.355-5.089-20.355-15.266-20.355-15.266v-117.04s0.447-61.03 0-81.419c-1.119-51.128-35.621-81.419-35.621-81.419 86.508 0 220.655-40.353 249.346-193.371 30.533-162.837-50.886-239.168-50.886-239.168z"
            p-id="2266"
            fill="#e6e6e6"
          ></path>
        </svg>
      </div>
    </div>
  </el-header>
</template>

<script lang="ts" setup>
import logoSrc from '@/assets/ss.gif'

const goToGitHub = () => {
  window.open('https://github.com/SeldomQA/schedule-server', '_blank')
}
</script>

<style lang="less" scoped>
.el-header {
  --el-header-height: 40px;
  width: 100%;
  padding-left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  background-color: #2c3e50;

  .left-navbar {
    display: flex;
    align-items: center;

    .logo {
      height: 25px;
    }

    .el-select {
      margin-left: 20px;
      margin-right: 10px;
      width: 230px;
    }

    .el-menu.el-menu--horizontal {
      border-bottom: none;

      .el-menu-item {
        height: 40px;
      }
    }
  }

  .right-navbar {
    .icon-github {
      margin-top: 5px;
      cursor: pointer;
    }
  }
}

//改变默认选择框样式
.navbar {
  :deep(:focus-visible) {
    outline: -webkit-focus-ring-color auto 0px;
  }

  :deep(.el-input__wrapper) {
    background-color: #2c3e50;
    box-shadow: none;
  }

  :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    color: aliceblue;
  }
}
</style>
